<template>
  <div>
    <van-uploader :after-read="afterRead" />

  <div class='caseUpload' v-show="false">
    <nav-bar title="预约"
             :goback="true"></nav-bar>
    <van-uploader class='upload'
                  name="uploader"
                  :after-read="onRead"
                  :max-size='size* 1024'
                  accept='image/png, image/jpeg'
                  @oversize='oversize'>
      <img src="/static/img/upload/phone.png"
           alt=""><span>手机上传</span>
      <van-icon name="arrow" />
    </van-uploader>
    <div class="tipsBox">
      <span class="tips">
        目前仅支持jpg,png格式上传，文件大小不超过{{size/(1024*1024)}} M。
      </span>
    </div>
  </div>
  </div>
</template>

<script>
import NavBar from "@/components/nav/navBar";

export default {
  components: {
    NavBar,
  },
  data () {
    return {
      size: 1000000
    }
  }, methods: {
    oversize () {
      this.$toast('超出限制');
    },
    onRead (file) {
      console.log(file)
    }
  }
}
</script>

<style lang='scss' scoped>
.caseUpload {
  .upload {
    // margin-top: 45px;
    width: 281px;
    height: 47px;
    margin: 66px 19px 0 19px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(222, 222, 222, 1);
    border-radius: 1px;

    img {
      width: 34px;
      height: 34px;
      padding: 7px 0 7px 16px;
    }
    span {
      position: absolute;
      top: 18px;
      left: 68px;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(60, 60, 60, 1);
    }
    i {
      float: right;
      padding: 17px 11px;
      color: rgba(155, 155, 155, 1);
    }
  }
  .tipsBox {
    width: 281px;
    height: 30px;
    margin: 20px auto;
    .tips {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
  }
}
</style>